<template>
  <!-- 使用 Element Plus 的 el-dialog 作为弹框 -->
  <el-dialog
       :model-value="visible"
    title="生产排程"
    width="80%"
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <!-- 弹框主体内容 -->
    <!-- 在这里添加一个 v-if 判断，确保 planData 有值时才显示详情和表单 -->
    <div v-if="planData">
      <el-form :model="scheduleForm" label-width="120px" ref="scheduleFormRef">
        <!-- 显示选中的计划数量 -->
        <el-alert
          v-if="planData.plans && planData.plans.length > 1"
          :title="`已选择 ${planData.plans.length} 个生产计划`"
          type="info"
          :closable="false"
          style="margin-bottom: 20px;"
        />

        <!-- 显示生产计划详情 -->
        <el-row :gutter="20">
          <el-col :span="12">
            {{ displayedPlanDetails }}
            <el-form-item label="生产计划编号">
              <span>{{ displayedPlanDetails.ProductionPlanningCode }}</span>
            </el-form-item>
            <el-form-item label="成品名称">
              <span>{{ displayedPlanDetails.ProductName }}</span>
            </el-form-item>
             <el-form-item label="规格型号">
               <span>{{ displayedPlanDetails.ProductType }}</span>
             </el-form-item>
             <el-form-item label="尺寸">
                <span>{{ displayedPlanDetails.ProductSize }}</span>
             </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="订单编号">
                <span>{{ displayedPlanDetails.OrderCode }}</span>
             </el-form-item>
             <el-form-item label="工艺路线">
                <span>{{ displayedPlanDetails.ProcessRoute }}</span>
             </el-form-item>
             <el-form-item label="计划产量">
               <span>{{ displayedPlanDetails.CurrentPlanNum }}</span>
             </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">排程日期</el-divider>

         <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划开始日期" prop="plannedStartDate" :rules="{ required: true, message: '请选择计划开始日期', trigger: 'change' }">
              <el-date-picker
                v-model="scheduleForm.plannedStartDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%;"
                 value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束日期" prop="plannedEndDate" :rules="{ required: true, message: '请选择计划结束日期', trigger: 'change' }">
              <el-date-picker
                v-model="scheduleForm.plannedEndDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%;"
                 value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">工人信息</el-divider>

        <div>
          <!-- 工人信息表格 -->
          <el-table :data="workerList" style="width: 100%" @selection-change="handleWorkerSelectionChange" @row-dblclick="handleWorkerRowDoubleClick">
            <el-table-column type="selection" width="55" />
            <!-- 将 prop 改为使用 slot 来自定义单元格内容 -->
            <el-table-column label="工人工时编号">
              <template #default="{ row }">
                <!-- 根据 row._isEditing 状态切换显示 -->
                <el-input v-if="row._isEditing" v-model="row.WorkerCode" @blur="handleWorkerCellBlur(row)" @keyup.enter="handleWorkerCellBlur(row)"></el-input>
                <span v-else>{{ row.WorkerCode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="工人名称">
               <template #default="{ row }">
                 <el-input v-if="row._isEditing" v-model="row.WorkerName" @blur="handleWorkerCellBlur(row)" @keyup.enter="handleWorkerCellBlur(row)"></el-input>
                 <span v-else>{{ row.WorkerName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="部门">
               <template #default="{ row }">
                 <el-input v-if="row._isEditing" v-model="row.Department" @blur="handleWorkerCellBlur(row)" @keyup.enter="handleWorkerCellBlur(row)"></el-input>
                 <span v-else>{{ row.Department }}</span>
              </template>
            </el-table-column>
            <el-table-column label="班组">
               <template #default="{ row }">
                 <el-input v-if="row._isEditing" v-model="row.Team" @blur="handleWorkerCellBlur(row)" @keyup.enter="handleWorkerCellBlur(row)"></el-input>
                 <span v-else>{{ row.Team }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态">
               <template #default="{ row }">
                 <!-- 状态可能需要下拉选择，这里先用输入框 -->
                 <el-input v-if="row._isEditing" v-model="row.WorkerState" @blur="handleWorkerCellBlur(row)" @keyup.enter="handleWorkerCellBlur(row)"></el-input>
                 <span v-else>{{ row.WorkerState }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 工人信息操作按钮 -->
          <div style="margin-top: 10px;">
            <el-button type="primary" size="small" @click="addWorkerRow">新增工人</el-button>
            <el-button type="danger" size="small" @click="deleteWorkerRows" :disabled="selectedWorkers.length === 0">删除选中工人</el-button>
          </div>
        </div>

        <el-divider content-position="left">机床信息</el-divider>

        <div>
          <!-- 机床信息表格 -->
          <el-table :data="machineList" style="width: 100%" @selection-change="handleMachineSelectionChange" @row-dblclick="handleMachineRowDoubleClick">
            <el-table-column type="selection" width="55" />
            <!-- 将 prop 改为使用 slot 来自定义单元格内容 -->
            <el-table-column label="设备编号">
              <template #default="{ row }">
                 <el-input v-if="row._isEditing" v-model="row.DeviceCode" @blur="handleMachineCellBlur(row)" @keyup.enter="handleMachineCellBlur(row)"></el-input>
                 <span v-else>{{ row.DeviceCode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="设备名称">
               <template #default="{ row }">
                 <el-input v-if="row._isEditing" v-model="row.DeviceName" @blur="handleMachineCellBlur(row)" @keyup.enter="handleMachineCellBlur(row)"></el-input>
                 <span v-else>{{ row.DeviceName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态">
               <template #default="{ row }">
                 <!-- 状态可能需要下拉选择，这里先用输入框 -->
                 <el-input v-if="row._isEditing" v-model="row.DeviceState" @blur="handleMachineCellBlur(row)" @keyup.enter="handleMachineCellBlur(row)"></el-input>
                 <span v-else>{{ row.DeviceState }}</span>
              </template>
            </el-table-column>
             <el-table-column label="状态">
               <template #default="{ row }">
                 <el-input v-if="row._isEditing" v-model="row.DevicePicture" @blur="handleMachineCellBlur(row)" @keyup.enter="handleMachineCellBlur(row)"></el-input>
                 <span v-else>{{ row.DevicePicture }}</span>
              </template>
            </el-table-column>
          </el-table>
           <!-- 机床信息操作按钮 -->
          <div style="margin-top: 10px;">
            <el-button type="primary" size="small" @click="addMachineRow">新增机床</el-button>
            <el-button type="danger" size="small" @click="deleteMachineRows" :disabled="selectedMachines.length === 0">删除选中机床</el-button>
          </div>
        </div>

      </el-form>
    </div>
     <div v-else>
      <p>未能加载生产计划数据。</p>
    </div>


    <!-- 弹框底部按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitScheduleForm">
          确定排程
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, reactive, computed } from 'vue';
import { ElDialog, ElButton, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElDivider, ElMessage, ElRow, ElCol, ElTable, ElTableColumn, ElAlert } from 'element-plus';
// 假设您有一个 api 文件用于处理后台请求，例如：
// import { schedulePlanApi } from '@/api/scheduleApi'; // TODO: 请根据您的项目实际情况导入
import http from '@/api/http';


// 定义组件接收的 props
const props = defineProps({
  visible: { // 控制弹框显示/隐藏
    type: Boolean,
    default: false
  },
  planData: { // 生产计划详情数据
    type: Object,
    default: null
  }
});

// 定义组件可以触发的事件
const emit = defineEmits(['update:visible', 'scheduled-success']);

// 定义机床列表数据
const machineList = ref([]);

// 定义工人列表数据
const workerList = ref([]);

// 定义选中的工人和机床列表
const selectedWorkers = ref([]);
const selectedMachines = ref([]);
// 处理工人表格选中变化
const handleWorkerSelectionChange = (selection) => {
  selectedWorkers.value = selection;
};

// 处理机床表格选中变化
const handleMachineSelectionChange = (selection) => {
  selectedMachines.value = selection;
};

// 监听 planData 的变化，当有新的机床和工人数据时更新 machineList 和 workerList
watch(() => props.planData, (newValue) => {
  console.log('弹框接收到 planData 变化:', newValue);
  if (newValue) {
    if (newValue.machineList) {
      // 为每行数据添加 _isEditing 状态
      machineList.value = newValue.machineList.map(item => ({ ...item, _isEditing: false }));
      console.log('弹框中的机床数据已更新：', machineList.value);
    }
    if (newValue.workerHours) {
      // 为每行数据添加 _isEditing 状态
      workerList.value = newValue.workerHours.map(item => ({ ...item, _isEditing: false }));
      console.log('弹框中的工人工时数据已更新：', workerList.value);
    }
  }
}, { immediate: true });

// *** 将计算属性移动到 props 定义之后，并调整逻辑使其始终返回完整对象 ***
const displayedPlanDetails = computed(() => {
  // 总是返回一个对象结构，即使 planData 为 null
  const details = {
    ProductionPlanningId:'',
    ProductionPlanningCode: '-',
    ProductName: '-', // 假设您需要显示成品名称
    CurrentPlanNum: '-', // 假设您需要显示计划数量
    OrderCode: '-', // 添加订单编号
    ProductType: '-', // 添加规格型号
    ProductSize: '-', // 添加尺寸
    ProcessRoute: '-', // 添加工艺路线
    PlannedQuantity: '-', // 添加计划产量 (使用 CurrentPlanNum 的值)
    // TODO: 根据您弹框中需要显示的计划详情字段，在这里添加并设置默认值
  };

  if (props.planData && props.planData.plans && props.planData.plans.length > 0) {
    const firstPlan = props.planData.plans[0];
    details.ProductionPlanningCode = firstPlan.ProductionPlanningCode || '-';
    details.ProductionPlanningId = firstPlan.ProductionPlanningId || '-';
    details.ProductName = firstPlan.ProductName || '-';
    details.CurrentPlanNum = firstPlan.CurrentPlanNum != null ? firstPlan.CurrentPlanNum : '-';
    details.OrderCode = firstPlan.OrderCode || '-';
    details.ProductType = firstPlan.ProductType || '-';
    details.ProductSize = firstPlan.ProductSize || '-';
    details.ProcessRoute = firstPlan.ProcessRoute || '-';
    details.PlannedQuantity = firstPlan.CurrentPlanNum != null ? firstPlan.CurrentPlanNum : '-';
  }

  return details;
});

// 定义表单数据
const scheduleForm = reactive({
  plannedStartDate: null,
  plannedEndDate: null,
  scheduledWorker: '',
  scheduledMachine: '',
  workerList: [],
  machineList: [],
});

// 获取表单引用，用于触发表单验证
const scheduleFormRef = ref(null);


// 监听 visible prop 的变化，当弹框显示时重置表单（如果需要的话）
watch(() => props.visible, (newValue) => {
  if (newValue) {
    // 弹框显示时可能需要加载工人、机床等下拉框数据
    // TODO: 加载下拉框数据，并将数据赋值给 scheduleForm.workerList 和 scheduleForm.machineList
    // 例如：
    // loadSelectOptions(); // 调用加载数据的函数
    
    // 重置表单状态和验证结果
    if (scheduleFormRef.value) {
        scheduleFormRef.value.resetFields();
    }
    // 如果需要根据 planData 预填充表单，可以在这里进行
    // 例如： scheduleForm.plannedStartDate = props.planData.PlanningStartDate || null;
    // scheduleForm.plannedEndDate = props.planData.PlanningEndDate || null;

  } else {
      // 弹框关闭时清空表格数据 (可选)
      scheduleForm.workerList = [];
      scheduleForm.machineList = [];
  }
});

// 处理弹框关闭事件
const handleClose = () => {
  // 通知父组件更新 visible prop，关闭弹框
  emit('update:visible', false);
  // 可选：清空表单数据
   // scheduleFormRef.value.resetFields();
};

// 提交排程表单
const submitScheduleForm = async () => {
  if (!scheduleFormRef.value) return;

    // 验证是否选择了工人和机床
    if (selectedWorkers.value.length === 0) {
      ElMessage.warning('请选择工人');
      return;
    }
    if (selectedMachines.value.length === 0) {
      ElMessage.warning('请选择机床');
      return;
    }
    if( scheduleForm.plannedStartDate==null || scheduleForm.plannedEndDate==null){
      ElMessage.warning('请选择计划开始日期和计划结束日期');
      return;
    }

    // 检查 planData 和 plans 数组是否存在且不为空
    if (!props.planData || !props.planData.plans || props.planData.plans.length === 0) {
      ElMessage.error('排程数据错误：未找到生产计划信息');
      return;
    }
console.log('计划数据id:', props.planData.plans[0].ProductionPlanningId);
    // 构建请求数据，匹配后台 BatchAddScheduleDto 格式
    const requestData = {
      productionPlanningId: props.planData.plans[0].ProductionPlanningId, // 获取单个计划ID
      workingHoursList: selectedWorkers.value, // 匹配后台字段名
      machineToolList: selectedMachines.value, // 匹配后台字段名
      planningStartDate: scheduleForm.plannedStartDate, // 匹配后台字段名
      planningEndDate: scheduleForm.plannedEndDate // 匹配后台字段名
    };

    console.log('发送的请求数据:', requestData);
    // 发送请求到后台批量添加接口（使用您提供的 API 名称）
    const response = await http.post('/api/ProductionPlanning/batchAddWorkingHoursAndMachineTools', requestData);
    console.log('后台响应:', response);
    if (response.status==true) {
      ElMessage.success('排程成功'); // 或者批量排程成功
      emit('scheduled-success');
      handleClose();
    } else {
      ElMessage.error(response.message || '排程失败'); // 或者批量排程失败
    }

};

// 批量处理多个计划
// TODO: 如果需要在弹框打开时加载下拉框数据和表格数据，可以在这里添加一个方法并在 watch visible 中调用
// 例如：
// const loadModalData = async () => {
//   try {
//     // 加载工人数据
//     const workers = await api.getWorkers(); // 假设有获取工人列表的 API
//     scheduleForm.workerList = workers; // 更新工人表格数据
//
//     // 加载机床数据
//     const machines = await api.getMachines(); // 假设有获取机床列表的 API
//     scheduleForm.machineList = machines; // 更新机床表格数据
//
//     // 加载下拉框数据等
//
//   } catch (error) {
//     console.error('加载弹框数据失败:', error);
//   }
// };

// TODO: 如果工人信息和机床信息是通过表格选择的，需要实现获取选中数据的方法
// const getSelectedWorkers = () => { /* 实现获取选中工人逻辑 */ };
// const getSelectedMachines = () => { /* 实现获取选中机床逻辑 */ };

// 双击工人行事件处理
const handleWorkerRowDoubleClick = (row) => {
  // 将当前行的编辑状态设置为 true
  row._isEditing = true;
  // 可以添加逻辑来确保同时只有一个行处于编辑状态
  workerList.value.forEach(item => {
    if (item !== row) {
      item._isEditing = false;
    }
  });
};

// 工人单元格失去焦点或按下 Enter 键事件处理
const handleWorkerCellBlur = (row) => {
  // 延迟一点时间将编辑状态设置为 false，防止点击其他行时焦点问题
  setTimeout(() => {
      row._isEditing = false;
  }, 50);
};

// 双击机床行事件处理
const handleMachineRowDoubleClick = (row) => {
  // 将当前行的编辑状态设置为 true
   row._isEditing = true;
   // 可以添加逻辑来确保同时只有一个行处于编辑状态
   machineList.value.forEach(item => {
     if (item !== row) {
       item._isEditing = false;
     }
   });
};

// 机床单元格失去焦点或按下 Enter 键事件处理
const handleMachineCellBlur = (row) => {
   // 延迟一点时间将编辑状态设置为 false，防止点击其他行时焦点问题
   setTimeout(() => {
      row._isEditing = false;
   }, 50);
};

// 添加新增工人方法
const addWorkerRow = () => {
  // 添加一个空的工人对象， WorkerHoursId 使用 UUID 或其他唯一标识
  const newWorker = {
    WorkingHoursId: generateGuid(), // 需要实现一个生成 GUID 的方法或使用库
    ProductionPlanningId: props.planData.plans && props.planData.plans.length > 0 ? props.planData.plans[0].ProductionPlanningId : null,
    WorkerCode: '',
    WorkerName: '',
    Department: '',
    Team: '',
    WorkerState: '空闲', // 默认状态
    _isEditing: true // 新增行默认进入编辑状态
    // TODO: 根据 WorkerHours 实体添加其他需要的属性并设置默认值
  };
  // 先关闭其他行的编辑状态，然后添加新行
   workerList.value.forEach(item => item._isEditing = false);
  workerList.value.push(newWorker);
};

// 添加删除选中工人方法
const deleteWorkerRows = () => {
  // 从 workerList 中移除 selectedWorkers 中包含的项
  workerList.value = workerList.value.filter(worker => !selectedWorkers.value.includes(worker));
  // 清空选中项
  selectedWorkers.value = [];
};

// 添加新增机床方法
const addMachineRow = () => {
   // 添加一个空的机床对象， MachineId 使用 UUID 或其他唯一标识
  const newMachine = {
    MachineId: generateGuid(), // 需要实现一个生成 GUID 的方法或使用库
    ProductionPlanningId: props.planData.plans && props.planData.plans.length > 0 ? props.planData.plans[0].ProductionPlanningId : null,
    DeviceCode: '',
    DeviceName: '',
    DeviceState: '空闲', // 默认状态
    DevicePicture: '',
    _isEditing: true // 新增行默认进入编辑状态
    // TODO: 根据 MachineTool 实体添加其他需要的属性并设置默认值
  };
    // 先关闭其他行的编辑状态，然后添加新行
    machineList.value.forEach(item => item._isEditing = false);
  machineList.value.push(newMachine);
};

// 添加删除选中机床方法
const deleteMachineRows = () => {
   // 从 machineList 中移除 selectedMachines 中包含的项
  machineList.value = machineList.value.filter(machine => !selectedMachines.value.includes(machine));
  // 清空选中项
  selectedMachines.value = [];
};

// TODO: 实现一个生成 GUID 的方法 (如果您的项目有，请替换)
const generateGuid = () => {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
};

</script>

<style scoped>
/* 添加一些组件的局部样式 */
.dialog-footer button {
  margin-left: 10px;
}

/* 可以添加更多样式来美化布局 */
</style>
